// import React from 'react'
import { useSelector, useDispatch } from "react-redux"
import numStatus from "@/store/NumStatus"

export default function Page1() {
  // 利用 useSelect 获取到组件提供的store仓库数据
  const { num } = useSelector((state: RootState) => {
    return {
      // 由于当前采用的是将不同Reducer模块合并的写法，所以如果要获取某个数据，还是得从它本身所在的Reducer模块中获取
      num: state.handleNumReducer.num
    }
  })

  const { sarr } = useSelector((state: RootState) => {
    return {
      sarr: state.handleArrReducer.sarr
    }
  })

  const disptach = useDispatch()
  // 调用同步操作方法修改handleNumReducer仓库中的数据
  const changeNumber = () => {
    // 利用disptach操作store仓库
    // type 是要执行的动作类型，val是要进行处理的数据
    disptach({ type: "add1", val: 20 })
  }
  // 调用异步操作方法修改handleNumReducer仓库中的数据
  const changeNumber2 = () => {
    // 异步调用异步操作方法要通过 redux-thunk，需要安装并且在仓库中配置redux-thunk
    // 下面是在组件中异步调用操作方法(异步定义在组件中)
    /* disptach((disptach)=>{
      setTimeout(()=>{
        disptach({type:"add1"})
      },2000)
    }) */

    // 下面是调用仓库中的异步操作方法(异步定义在仓库中)
    disptach(numStatus.asyncActions.asyncAdd1)
  }

  // 修改handleArrReducer仓库中的数据
  const changeArr = () => {
    disptach({ type: "sarrpush", val: 100 })
  }

  return (
    <div>
      <p>Page1</p>
      <p>{num}</p>
      <button onClick={changeNumber}>同步按钮</button>
      <button onClick={changeNumber2}>异步按钮</button>
      <p>{sarr}</p>
      <button onClick={changeArr}>按钮</button>
    </div>
  )
}
